import React from 'react';
import { View, Text, Image, TouchableWithoutFeedback, TouchableOpacity, StyleSheet, Dimensions } from "react-native";
import { IconFont } from 'tuya-panel-kit';

const Button = d => {
  const {
    title,
    icon,
    style,
    iconStyle,
    labelStyle,
    iconColor,
    color,
    selected,
    selectedBgColor,
    selectedTitleColor,
    titleColor,
    children,
    accessibilityLabel,
    ...props
  } = d;
  const child = children ? <View style={styles.btn}>{children}</View> : null;
  const iconProps = {
    fill: iconColor,
    stroke: iconColor,
    ...props,
  };
  const first =
    typeof icon === 'number' || typeof icon === 'object' ? (
      <Image style={[iconStyle, { tintColor: iconColor, position: 'absolute', }]} source={icon} resizeMode="stretch" />
    ) : typeof color === 'string' && color ? (
      <View style={[iconStyle, { backgroundColor: color, position: 'absolute', }]} />
    ) : undefined;

  const second = title && (
    <Text style={[labelStyle, selected ? styles.selText : styles.unselText, selected ? selectedTitleColor:titleColor]} numberOfLines={3}>
      {title}
    </Text>
  );

  // 选中时显示selBg，white，做选中效果
  const selBg =
    selected ? (
      typeof icon === 'number' || typeof icon === 'object' ? (
        <Image style={[iconStyle, { width:56, height:56, borderRadius:28, tintColor: iconColor, position: 'absolute', }]} source={icon} resizeMode="stretch" />
      ) : typeof color === 'string' && color ? (
        <View style={[iconStyle, { width:56, height:56, borderRadius:28, backgroundColor: color, position: 'absolute', }]} />
      ) : undefined
    ) : undefined;

  const white =
    selected ? (
      <View style={[iconStyle, selectedBgColor, { width:52, height:52, borderRadius: 26, }]} >
      </View>
    ) : undefined;

  return (
    <TouchableOpacity style={styles.cell} accessibilityLabel={accessibilityLabel} {...props}>
      {child || (
        <View style={styles.btn}>
          <View style={[iconStyle,{marginTop:5, }]}>{[selBg,white,first]}</View>
          {second}
        </View>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  btn: {
    flex: 1,
    alignItems: 'center',
    // justifyContent: 'center',
    marginTop: 1,
    // backgroundColor: '#b4dcec',
    width: (Dimensions.get('window').width-30)/4,
  },
  cell: {
    alignItems: 'center',
  },
  selText: {
    color: '#020202',
    fontSize: 15,
    marginTop: 8,
  },
  unselText: {
    color: '#939494',
    fontSize: 15,
    marginTop: 8,
  },
});

export default Button;
